import React, { Component } from 'react'
// 1. 安装moment npm i moment
// 2. 导入moment
import moment, { now } from 'moment'
import Son from './component/Son';
/* 
如果存在子组件，执行顺序为
App constructor
App render
Son constructor
Son render
Son componentDidMount
App componentDidMount
如果子组件进行更新了
则执行顺序为： 
App render
Son render
Son componentDidUpdate
App componentDidUpdate
*/
export default class App extends Component {
  constructor() {
    super()
    // 组件挂载时执行
    console.log('App constructor');
    
  }
  state = {
    nowDate: moment().format('YYYY-MM-DD HH:mm:ss'),
    msg: '永恒刹那'
  }
  // 组件更新时执行
  render() {
    console.log('App render');
    const {nowDate, msg} = this.state
   
    return (
      <div>
        App组件
        <h3>当前时间（改变的值）：{nowDate}</h3>
        <button onClick={() => {
          this.setState({
            nowDate: moment().format('YYYY-MM-DD HH:mm:ss')
          })
        }}>设置状态</button>

        <h3>永恒时间（不变的值）：{msg}</h3>
        <button onClick={() => {
          this.setState({
            msg: msg
          })
        }}>设置状态</button>
      {/* 通过两者对比，证明只要执行setState(),就会触发render函数的执行，继而触发componentDidUpdate */}
      
      {/* 强制更新 */}
      <button onClick={()=> {
        this.state.msg = '改变永恒' // 由于直接赋值并不会触发render函数的执行
        this.forceUpdate() // 使用强制更新则可以触发人的人函数的执行，进而触发componentDidUpdate的执行
      }} >强制更新</button>
        <Son nowDate={nowDate}></Son>
      </div>
    )
  }
  // 组件将要卸载时执行
  componentWillUnmount() {
    clearInterval(this.timer)
    console.log('Son componentWillUnmount');
    
  }
  // 卸载时执行 
  componentDidMount() {
    console.log('App componentDidMount');
    // 作用1:开启定时器
    // setInterval(()=> {
    //   this.setState({
    //     nowDate: moment().format('YYYY-MM-DD HH:mm:ss') 
    //   })
    // },1000)
    
  }
   /**
     * component : 组件
     * Did： do 过去式 完成
     * Mount: 挂载
     * componentDidMount 组件完成挂载之后执行, jsx已经渲染成真实dom出现在页面中了
     * 作用：
     * 1. 开启定时器
     * 2. 发送ajax请求  axios
     * 3. 订阅消息
     * 4. 添加自定义事件
     * 注意：constructor 和 componentDidMount 只执行一次
     */

  // 组件更新完成后触发
  componentDidUpdate() {
    console.log('App componentDidUpdate');
      
  }


  }
